<template>
  <main>
    <mt-header title="兑换红包" :fixed="true">
      <router-link style="text-decoration: none;" to="/redenvelope" slot="left">
        <span class="iconfont icon-go-back"></span>
      </router-link>
    </mt-header>
    <input type="text" placeholder="请输入兑换码" v-model="exchangeCode" class="exchange-inp" />
    <button :class="['exchange', color? 'color' : '']">兑换</button>
  </main>
</template>

<script>
export default {
  name: 'exchange',
  data() {
    return {
      exchangeCode: '',
      color: false
    }
  },
  watch: {
    exchangeCode() {
      if(this.exchangeCode !== '') {
        this.color = true
      }else {
        this.color = false
      }
    }
  }
}
</script>

<style scoped>
  .exchange-inp {
    margin-top: 120px;
    width: 100%;
    height: 80px;
    padding-left: 15px;
    border: none;
    font-size: 30px;
    outline: none;
  }
  .mint-header {
    height: 90px;
    font-size: 34px;
    font-weight: 600;
  }
  .icon-go-back {
    font-size: 26px;
  }
  .exchange {
    display: block;
    width: 80%;
    padding: 15px;
    margin: 20px auto;
    background-color: #CCC;
    border: none;
    border-radius: 5px;
    font-size: 35px;
    color: #fff;
  }
  .color {
    background-color: #00d762;
  }
</style>
